<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <input type="text" placeholder="请输入要查询的学生姓名" id="ip" />
    <button id="btnSet">设置成绩</button>
    <button id="btnGet">查询成绩</button>
    <p id="pInfo">成绩显示区</p>

    <!-- 
    存储5个学生的成绩【数学，编程，打游戏】在各自的闭包中
    根据姓名查询不同学生的成绩
    -->
    <script>
      function scrore(name) {

        /* 闭包内的私有数据 */
        const scores = {
          chinese: 0,
          math: 0,
          coding: 0,
        };

        /* 
        返回闭包内数据的操作API对象
        只要有人访问/引用这个对象
        =>score函数无法释放
        =>形成闭包
        =>每个闭包都可以独立地存储各自的学习成绩  
        */
        return {
          // 设置学习成绩
          set(key, value) {
            scores[key] = value;
          },

          // 查询所有
          getAll() {
            return `${name}:${JSON.stringify(scores)}`;
          },
        };
      }
    </script>

    <!-- 业务逻辑 -->
    <script>
        const arr = ["张三疯","尼古拉斯赵四","隔壁老王"]

        /* 
        {
            name1:成绩闭包操作api,
            name2:成绩闭包操作api
        }
        */
        const obj = {}

        /* 一人一个成绩闭包的操作API */
        arr.forEach(
            // {张三疯:张三疯的成绩闭包操作API}
            name => obj[name]=scrore(name)
        )

        /* 设置成绩 */
        btnSet.onclick = function(){
            // 拿到用户的输入 张三疯:chinese:50
            let [name,key,value] = ip.value.split(":")

            // 调用name对应的闭包中的set设置该生的科目成绩
            obj[name].set(key,value)
        }

        /* 根据姓名查询学生的全部成绩 */
        btnGet.onclick = function(){
            const name = ip.value
            // 根据名字拿到其成绩闭包的操作API 进而调用getAll
            pInfo.innerText = obj[name].getAll()
        }
    </script>
  </body>
</html>
